<template>
  <div>
    <Reload></Reload>
    <section class="mt-4">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0 mt-5">
          <!-- Title -->
          <div class="section-title pl-4">
            <h3 class="sub-title base-color mb-2">
              中 国 传 统 二 十 四 节 气
            </h3>
            <h2 class="title text-dark" v-if="seasonData[7]">
              {{ seasonData[0][0].content.substring(0, 2) }}
            </h2>
          </div>

          <!-- Text -->
          <p class="text-muted my-3 pl-4" v-if="seasonData[7]">
            {{ seasonData[0][3].content }}
          </p>

          <!-- List -->
          <ul class="content-list my-3 px-4">
            <li v-if="seasonData[7]">
              <Folding :title="'jianjie1'" :isSelect="true">
                <span slot="title">{{ seasonData[0][0].content }}</span>
                <div slot="content">
                  <p>{{ seasonData[0][4].content }}</p>
                  <span>{{ seasonData[0][5].content }}</span>
                  <p>{{ seasonData[0][6].content }}</p>
                  <span>{{ seasonData[0][7].content }}</span>
                  <Folding :title="'jianjie2'" :isSelect="false">
                    <span slot="title">节气特点</span>
                    <div slot="content">
                      <span
                        v-for="(p, index) in seasonData[0].slice(7)"
                        :key="index + '节气特点'"
                        >{{ p.content }}</span
                      >
                    </div>
                  </Folding>
                </div>
              </Folding>
            </li>
          </ul>
        </div>

        <div class="col-lg-6">
          <div id="keepHealthSeasonImg" class="position-relative">
            <img
              src="../../assets/img/video-01.jpg"
              alt="/"
              class="img-fluid rounded"
            />
            <a
              href="https://vimeo.com/354894903"
              class="popup-vimeo video-box-btn my-4 mb-lg-0"
            >
              <i class="lni-play"></i>
            </a>
            <section
              id="testimonial"
              class="seasonList testimonial text-center"
            >
              <div class="container">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="owl-carousel mt-5">
                      <!-- list -->
                      <div
                        v-for="(p, index1) in seasonList"
                        :key="index1 + '节气list'"
                        class="testimonial-item row"
                      >
                        <!-- item -->
                        <div
                          v-for="(q, index2) in p"
                          :key="index2 + '节气item'"
                          class="col-lg-4 mt-auto"
                        >
                          <div
                            class="rounded blog-item"
                            @click="resetSeason(index1 * 3 + index2)"
                          >
                            <div class="image-blog">
                              <img
                                :src="`../../../static/img/${index2+1}.jfif`"
                                alt="/"
                                class="rounded-top"
                              />
                            </div>
                            <div
                              class="rounded-bottom blog-content p-1 text-center"
                            >
                              <h5>{{ q }}</h5>
                            </div>
                          </div>
                        </div>
                        <!-- item -->
                      </div>
                      <!-- list -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End container -->
            </section>
            <!-- END TESTIMONIAL -->
          </div>
        </div>
      </div>
    </section>

    <section>
      <KeepHealthNav :nowPage="1"></KeepHealthNav>
    </section>
    <!-- ABOUT
            ============================================= -->
    <section id="about" class="about video py-3">
      <div class="container">
        <div class="about-bg-graphics">
          <img src="../../assets/img/about-bg.png" alt="/" />
        </div>

        <div class="row align-items-center" v-if="seasonData[7]">
          <div class="col-lg-12 px-5">
            <Folding :title="'foodJinJi'" :isSelect="true">
              <span slot="title">饮食禁忌</span>
              <div slot="content">
                <p>适宜食物</p>
                <span
                  v-for="(p, index) in seasonData[5]"
                  :key="index + '适宜食物'"
                  >{{ p.content }}</span
                >
                <p>禁忌食物</p>
                <span
                  v-for="(p, index) in seasonData[6]"
                  :key="index + '禁忌食物'"
                  >{{ p.content }}</span
                >
              </div>
            </Folding>
            <Folding :title="'foodJianYi'" :isSelect="true">
              <span slot="title">饮食建议</span>
              <div slot="content">
                <span
                  v-for="(p, index) in seasonData[1].slice(1)"
                  :key="index + '饮食建议'"
                  :class="{ p: p.lable === 'smalltitle' }"
                  >{{ p.content }}</span
                >
              </div>
            </Folding>
            <Folding :title="'foodShiCai'" :isSelect="true">
              <span slot="title">食材推荐</span>
              <div slot="content">
                <Folding
                  v-for="(p, index) in seasonData[7]"
                  :key="index + '食材推荐'"
                  :title="'food' + p[0].content"
                  :isSelect="false"
                >
                  <span slot="title">{{ p[0].content }}</span>
                  <div slot="content">
                    <span
                      v-for="(q, index) in p.slice(
                        1,
                        p.length - p[p.length - 1] - 1
                      )"
                      :key="index + 'q'"
                      :class="{ p: q.lable === 'smalltitle' }"
                      >{{ q.content }}</span
                    >
                    <Folding
                      v-for="(j, index) in p.slice(
                        p.length - p[p.length - 1] - 1,
                        p.length - 1
                      )"
                      :key="index + 'j'"
                      :title="'food' + j[0].content"
                      :isSelect="false"
                    >
                      <span slot="title">{{ j[0].content }}</span>
                      <div slot="content">
                        <span
                          v-for="(k, index) in j.slice(1)"
                          :key="index + 'k'"
                          :class="{ p: k.lable === 'smalltitle' }"
                          >{{ k.content }}</span
                        >
                      </div>
                    </Folding>
                  </div>
                </Folding>
              </div>
            </Folding>
            <Folding :title="'GenBen'" :isSelect="false">
              <span slot="title">养生根本</span>
              <div slot="content">
                <span
                  v-for="(p, index) in seasonData[3].slice(1)"
                  :key="index + '养生根本'"
                  :class="{ p: p.lable === 'smalltitle' }"
                  >{{ p.content }}</span
                >
              </div>
            </Folding>
            <Folding :title="'QiJu'" :isSelect="false">
              <span slot="title">起居养生</span>
              <div slot="content">
                <span
                  v-for="(p, index) in seasonData[2].slice(1)"
                  :key="index + '起居养生'"
                  :class="{ p: p.lable === 'smalltitle' }"
                  >{{ p.content }}</span
                >
              </div>
            </Folding>
            <Folding :title="'YunDong'" :isSelect="false">
              <span slot="title">运动养生</span>
              <div slot="content">
                <span
                  v-for="(p, index) in seasonData[4].slice(1)"
                  :key="index + '运动养生'"
                  :class="{ p: p.lable === 'smalltitle' }"
                  >{{ p.content }}</span
                >
              </div>
            </Folding>
          </div>
        </div>
        <!-- End row -->
      </div>
      <!-- End container -->
    </section>
    <!-- END ABOUT -->
  </div>
</template>

<script>
import $ from "jquery";
import axios from "axios";

import Folding from "../../components/Folding.vue";
import KeepHealthNav from "../../components/KeepHealthNav.vue";
import Reload from "../../components/Reload.vue";
import Season from "../../http/keepHealthSeason.js";
import {} from "../../assets/js/apps/roiton.js";
// 轮播图
import owlCarousel from "../../assets/js/libs/owl.carousel.min.js";

import {
  testimonialsCarousel,
  clientCarousel,
} from "../../assets/js/apps/roiton.js";

export default {
  props: {
    seasonIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      nowSeasonIndex: 0,
      nowSeasonDataChildren: [],
      seasonList: [
        ["立春", "雨水", "惊蛰"],
        ["春分", "清明", "谷雨"],
        ["立夏", "小满", "芒种"],
        ["夏至", "小暑", "大暑"],
        ["立秋", "处暑", "白露"],
        ["秋分", "寒露", "霜降"],
        ["立冬", "小雪", "大雪"],
        ["冬至", "小寒", "大寒"],
      ],
    };
  },
  computed: {
    seasonData: function () {
      return this.nowSeasonDataChildren;
    },
  },
  created() {},
  mounted() {
    testimonialsCarousel();
    clientCarousel();

    // 加载动画.fadeIn
    console.log($("#loader-wrapper"));

    // 获取当前二十四节气数据
    let myDate = new Date();
    console.log(
      Season.searchContent[
        Season.getSeasonIndex(
          myDate.getFullYear(),
          myDate.getMonth() + 1,
          myDate.getDate()
        )
      ]
    );
    axios
      .get(
        `http://81.68.255.101:8097/api/Askanswer/getyangshen/type=jieqi&question=${
          Season.searchContent[
            Season.getSeasonIndex(
              myDate.getFullYear(),
              myDate.getMonth() + 1,
              myDate.getDate()
            )
          ]
        }/`
      )
      .then((respons) => {
        this.nowSeasonDataChildren = Season.dataProcess(respons.data);
        // console.log(this.nowSeasonDataChildren[7]);
      });
  },
  updated() {
    testimonialsCarousel();
    clientCarousel();
  },
  methods: {
    resetSeason(index) {
      if (this.nowSeasonIndex === index) return;
      this.nowSeasonIndex = index;
      axios
        .get(
          `http://81.68.255.101:8097/api/Askanswer/getyangshen/type=jieqi&question=${Season.searchContent[index]}/`
        )
        .then((respons) => {
          console.log("???");
          console.log(Season.dataProcess(respons.data));
          this.nowSeasonDataChildren = Season.dataProcess(respons.data);
        });
    },
  },
  components: {
    Folding,
    KeepHealthNav,
    Reload,
  },
  watch: {
    // nowSeasonData: function (val) {
    //   this.nowSeasonDataChildren = val;
    //   testimonialsCarousel();
    //   clientCarousel();
    // },
    seasonIndex: function (val) {
      this.nowSeasonIndex = val;
    },
  },
};
</script>

<style scoped>
#keepHealthSeasonImg {
  position: relative;
}
#keepHealthSeasonImg .seasonList {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 100;
}
#keepHealthSeasonImg .seasonList .image-blog {
  width: 100%;
}
#keepHealthSeasonImg .seasonList .image-blog {
  border-radius: 10px 10px 0 0 !important;
}
</style>
